<template>
	<div>
		<p class="text-12px text-#86909C mb-10px">
			{{ props.title }}
		</p>
		<div class="w-140px">
			<el-select v-model="selected.value" placeholder="请选择" popper-class="person-rec-popper"
				suffix-icon="CaretBottom" @change="change">
				<el-option v-for="item in props.list" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
		</div>
	</div>
</template>
<script setup lang="ts">
import {computed} from 'vue';
interface IProps{
	title:string;
	list:any;
}

const props = defineProps<IProps>();
const emits = defineEmits(['change']);

const selected = ref<any>({
	label:'',
	value:''
})

const change = (val:any) => {
	props.list.forEach((item:any)=>{
		if(item.value == val){
			selected.value.label = item.label;
			selected.value.value = val;
		}
	})
	emits('change',selected.value)
}

onMounted(() => {
	selected.value.value = props.list[0].value;	
	selected.value.label = props.list[0].label;	
})

</script>
<style lang="scss">
.person-rec-popper{
	ul{
		padding:0;
		
	}
	.el-popper__arrow:before{
		display: none;
	} 
}	
</style>
